<template>
  <div>
    <el-dialog
      :model-value="props.dialogVisible"
      :title="props.formStatus === 1 ? '编辑接口' : '新增接口'"
      width="800px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form ref="interfaceFormRef" :model="interfaceForm" :rules="interfaceFormRules" label-width="120px" @submit.prevent>
        <el-form-item label="接口名称：" prop="name">
          <el-input v-model="interfaceForm.name" clearable placeholder="请输入接口名称"></el-input>
        </el-form-item>
        <el-form-item label="接口分组：" prop="project">
          <el-tree-select v-model="interfaceForm.project" :data="treeData" clearable placeholder="请选择接口分组" style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="接口说明：" prop="introdution">
          <div style="border: 1px solid #ccc;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="{}"/>
            <Editor
              style="height: 300px; overflow-y: hidden;"
              v-model="interfaceForm.introdution"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"/>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit(interfaceFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="InterfaceModifyForm">
import { ref, shallowRef, reactive, watch, ComponentInternalInstance, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['submit', 'update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formStatus: {
    type: Number,
    default: 0
  },
  formData: {
    type: Object,
    default: {}
  }
})

const treeData = ref<any>([
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: []
  }
])
const interfaceForm = reactive({
  project: '',
  name: '',
  introdution: ''
})
const interfaceFormRef = ref<FormInstance>()
const interfaceFormRules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入接口名称！' }
  ],
  project: [
    { required: true, message: '请选择接口分组！' }
  ],
})
const editorRef = shallowRef()
const editorConfig = { placeholder: '请输入内容...' }

// 记录 editor 实例
const handleCreated = (editor: any) => {
  editorRef.value = editor
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

watch(() => props.dialogVisible, async (newVal) => {
  if (newVal) {
    if (props.formStatus === 1) {
      interfaceForm.name = props.formData.name
    }
  }
})

// 关闭弹窗
const handleClose = () => {
  resetForm(interfaceFormRef.value)
  proxy?.$emit('update:dialogVisible', false)
}

// 提交表单
const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.formStatus === 0) {

      } else {}
    }
  })
}
</script>

<style lang="stylus" scoped>

</style>
